<template>
  <div class="wdzh">
    <!-- 筛选栏 -->
    <div class="query">
      <my-form :list="filter" @changeFormData="changeConditions"></my-form>
      <my-button bgc="#fff" border="#DCDCDF" fontColor="#387CF7" @click="search"
        >搜索</my-button
      >
      <my-button bgc="#fff" border="#DCDCDF" fontColor="#88898E" @click="reset"
        >重置</my-button
      >
    </div>
    <!-- 主体 -->
    <div class="container">
      <!-- 操作栏 -->
      <div class="action">
        <div class="add-del">
          <my-button
            type="add"
            bgc="#E4ECFF"
            fontColor="#649AF9"
            @click="handleClickAdd"
            >添加</my-button
          >
          <my-button
            type="del"
            bgc="#fff"
            border="#DCDCDF"
            fontColor="#88898E"
            @click="handleClickDel"
            >删除</my-button
          >
        </div>
        <div class="list-refresh">
          <my-dropdown-list
            :list="tableColumn"
            @change="changeTableColumn"
          ></my-dropdown-list>
          <div class="iconfont icon" @click="refresh">&#xe74a;</div>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table">
        <el-table
          v-if="tableHeight"
          border
          :data="dataSource"
          :height="tableHeight"
          row-class-name="row-class-name"
          header-row-class-name="header-row-class-name"
          style="width: 100%"
          @selection-change="selectionChange"
        >
          <el-table-column type="selection" width="100"> </el-table-column>
          <el-table-column
            v-if="tableColumn.type.show"
            prop="type"
            label="平台"
            width="100"
          >
            <template slot-scope="scope">
              <div class="slot-row">{{ getType(scope.row.type) }}</div>
            </template>
          </el-table-column>
          <el-table-column
            v-if="tableColumn.zhanghao.show"
            prop="zhanghao"
            label="账号信息"
            min-width="300"
          >
            <template slot-scope="scope">
              <div class="slot-row">
                <img :src="scope.row.zhanghao.avatar" alt="" class="avatar" />
                <div>{{ scope.row.zhanghao.nickname }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            v-if="tableColumn.e_account_role.show"
            prop="e_account_role"
            label="账号类型"
            width="100"
          >
            <template slot-scope="scope">{{
              scope.row.e_account_role
            }}</template>
          </el-table-column>
          <el-table-column
            v-if="tableColumn.status.show"
            prop="status"
            label="状态"
            width="130"
          >
            <template slot-scope="scope">
              <my-switch
                :value.sync="scope.row.status"
                @changeSwitchValue="changeSwitchValue(scope.row)"
              ></my-switch>
            </template>
          </el-table-column>
          <el-table-column
            v-if="tableColumn.createtime.show"
            prop="createtime"
            label="更新时间"
            width="180"
          ></el-table-column>
          <el-table-column label="操作" width="220">
            <template slot-scope="scope">
              <div class="slot-row">
                <my-button bgc="#93DB6C" @click="toAdd(scope.row)"
                  >授权</my-button
                >
                <my-button
                  v-if="scope.row.type == 'douyin'"
                  bgc="#F78385"
                  style="margin-left: 15px"
                  @click="getMyFans(scope.row)"
                  >粉丝</my-button
                >
                <my-button
                  v-if="scope.row.type == 'douyin'"
                  bgc="#0480FF"
                  style="margin-left: 15px"
                  @click="getMyAttention(scope.row)"
                  >关注</my-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="page">
        <el-pagination
          background
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[15, 25, 30]"
          layout="total,sizes, prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </div>
    <!-- ---------------- 弹窗 ---------------- -->
    <!-- 授权弹窗 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="24%"
      :show-close="false"
      class="dialog-shouquan"
    >
      <div class="header">
        <div>账号授权</div>
        <div class="iconfont icon-close" @click="dialogVisible = false">
          &#xe61d;
        </div>
      </div>
      <div class="body">
        <div class="btn-list">
          <div
            v-for="(btn, i) in platform"
            :key="i"
            class="btn-item"
            @click="handleClickPlatform(btn)"
          >
            <div class="btn">{{ btn.name }}</div>
          </div>
        </div>
        <div class="desc">
          <div class="desc-row">1、最多可管理账号20个！</div>
          <div class="desc-row">
            2、授权成功后，如果没有看到您授权的账号，请刷新本页面！
          </div>
        </div>
      </div>

      <div class="footer">
        <my-button
          bgc="#fff"
          border="#DCDCDF"
          fontColor="#88898E"
          @click="dialogVisible = false"
          >关闭</my-button
        >
      </div>
    </el-dialog>
    <!-- 好看视频 弹窗 -->
    <el-dialog
      :visible.sync="showHaoKan"
      width="31%"
      :show-close="false"
      class="dialog-haokan"
    >
      <div class="header">
        <div>好看视频信息填写</div>
        <div class="iconfont icon-close" @click="showHaoKan = false">
          &#xe61d;
        </div>
      </div>
      <div class="body">
        <div class="desc">
          <div class="desc-row">app_id与app_token获取:</div>
          <div class="desc-row">1、登录百家号(baijiahao.baidu.com)！</div>
          <div class="desc-row">2、页面滑动到最下方,点击【基本配置】</div>
          <div class="desc-row">
            3、点击成为开发者,把看到的app_id和token复制到对应文本框
          </div>
        </div>
        <div class="form">
          <my-input
            v-for="(item, key) in haoKanForm"
            :key="key"
            :value.sync="item.value"
            :label="item.label"
            :required="item.required"
            :placeholder="item.placeholder"
          ></my-input>
        </div>
      </div>

      <div class="footer">
        <my-button
          bgc="#fff"
          border="#DCDCDF"
          fontColor="#387CF7"
          @click="confirmHaoKan"
          >确定</my-button
        >
        <my-button
          bgc="#fff"
          border="#DCDCDF"
          fontColor="#88898E"
          @click="showHaoKan = false"
          >取消</my-button
        >
      </div>
    </el-dialog>
    <!-- 哔哩哔哩 弹窗 -->
    <el-dialog
      :visible.sync="showBiliBili"
      width="31%"
      :show-close="false"
      class="dialog-haokan"
    >
      <div class="header">
        <div>B站信息填写</div>
        <div class="iconfont icon-close" @click="showBiliBili = false">
          &#xe61d;
        </div>
      </div>
      <div class="body">
        <div class="desc">
          <a href="http://demo1.auth.yingwangke.com/blbl.html" target="_blank"
            >点击查看获取以下两项参数方法及流程</a
          >
        </div>
        <div class="form">
          <my-input
            v-for="(item, key) in biliForm"
            :key="key"
            :value.sync="item.value"
            :label="item.label"
            :required="item.required"
            :placeholder="item.placeholder"
          ></my-input>
        </div>
      </div>

      <div class="footer">
        <my-button
          bgc="#fff"
          border="#DCDCDF"
          fontColor="#387CF7"
          @click="confirmBiliBili"
          >确定</my-button
        >
        <my-button
          bgc="#fff"
          border="#DCDCDF"
          fontColor="#88898E"
          @click="showBiliBili = false"
          >取消</my-button
        >
      </div>
    </el-dialog>
    <!-- 粉丝 关注 列表 -->
    <el-dialog
      :visible.sync="showList"
      width="40%"
      :show-close="false"
      class="dialog-list"
    >
      <div class="header">
        <div>{{ listTitle }}</div>
        <div class="iconfont icon-close" @click="showList = false">
          &#xe61d;
        </div>
      </div>
      <div class="body">
        <my-table :columns="columns" :dataSource="response.list"></my-table>
      </div>
      <div class="footer">
        <!-- <my-button bgc="#ee1e4f">总数 {{ response.total }}</my-button> -->
        <my-button
          bgc="#fff"
          border="#DCDCDF"
          fontColor="#387CF7"
          @click="jumpIndex"
          >首页</my-button
        >
        <my-button
          v-if="response.has_more"
          bgc="#fff"
          border="#DCDCDF"
          fontColor="#CB8CF5"
          @click="nextPage()"
          >下一页</my-button
        >
        <!-- <my-button v-if="response.cursor != 0" bgc="#ee1e4f" @click="prevPage()"
          >上一页</my-button
        > -->
      </div>
    </el-dialog>
    <!-- 确认弹窗 -->
    <my-dialog-confirm
      :show.sync="showConfirm"
      @confirm="confirmDelete"
    ></my-dialog-confirm>
  </div>
</template>

<script>
import myButton from "@/components/myButton.vue";
import myForm from "@/components/myForm.vue";
import mySwitch from "@/components/mySwitch.vue";
import myInput from "@/components/myInput.vue";
import myDropdownList from "@/components/myDropdownList.vue";
import myDialogConfirm from "@/components/myDialogConfirm.vue";
import myTable from "@/components/myTable.vue";

import option from "@/data/option.js";
export default {
  components: {
    myButton,
    myForm,
    mySwitch,
    myInput,
    myDropdownList,
    myDialogConfirm,
    myTable,
  },
  data() {
    return {
      filter: {
        nickname: {
          type: "input",
          label: "名称",
          value: "",
          op: "%*%",
          placeholder: "请输入名称",
        },
        type: {
          type: "select",
          label: "平台",
          value: "",
          op: "=",
          placeholder: "请输入平台",
          list: option.vedioTypeList,
        },
        status: {
          type: "select",
          label: "状态",
          value: "",
          placeholder: "",
          op: "=",
          list: [
            {
              label: "全部",
              value: "",
            },
            {
              label: "停用",
              value: 0,
            },
            {
              label: "启用",
              value: 1,
            },
          ],
        },
      }, // 表格列表搜索条件
      dataSource: [],
      tableColumn: {
        type: {
          show: true,
          text: "平台",
        },
        zhanghao: {
          show: true,
          text: "账号信息",
        },
        e_account_role: {
          show: true,
          text: "账号类型",
        },
        status: {
          show: true,
          text: "状态",
        },
        createtime: {
          show: true,
          text: "更新时间",
        },
      },
      platform: option.vedioTypeList,
      // 表头文字 列宽度 列文字颜色 每列渲染对应的字段
      columns: [
        {
          label: "头像",
          width: 15,
          color: "#333333",
          key: "avatar",
          type: "image",
        },
        { label: "昵称", width: 40, color: "#333333", key: "nickname" },
        { label: "性别", width: 20, color: "#333333", key: "gender" },
        { label: "城市", width: 25, color: "#74798B", key: "city" },
      ],
      myTableList: [],
      haoKanForm: {
        appid: {
          label: "APP ID",
          value: "",
          required: true,
          placeholder: "",
        },
        nickname: {
          label: "昵称",
          value: "",
          required: true,
          placeholder: "",
        },
        token: {
          label: "Token",
          value: "",
          required: true,
          placeholder: "",
        },
      },
      biliForm: {
        nickname: {
          label: "昵称",
          value: "",
          required: true,
          placeholder: "",
        },
        appid: {
          label: "sessdata",
          value: "",
          required: true,
          placeholder: "",
        },
        token: {
          label: "bili_jct",
          value: "",
          required: true,
          placeholder: "",
        },
      },
      tableHeight: 0,
      currentPage: 1,
      pageSize: 15,
      total: 0,
      response: {
        cursor: 0,
        has_more: true,
        list: [],
        total: 0,
      },
      timer: null,
      listTitle: "粉丝列表",
      selectedRows: [],
      selectedUser: null,
      dialogVisible: false,
      showHaoKan: false,
      showConfirm: false,
      showList: false,
      showBiliBili: false,
    };
  },

  mounted() {
    this.tableHeight = document.querySelector(".table").offsetHeight;
    window.onresize = () => {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.tableHeight = document.querySelector(".table").offsetHeight;
      }, 500);
    };
    this.getData();
  },
  beforeDestroy() {
    window.onresize = null;
  },
  methods: {
    getType(type) {
      let re = option.vedioTypeList.find((v) => v.value == type);
      return re ? re.label : "";
    },
    // 获取列表
    async getData() {
      let filter = {};
      let op = {};
      for (let key in this.filter) {
        if (this.filter[key].value === "") {
          continue;
        }
        filter[key] = this.filter[key].value;
        op[key] = this.filter[key].op;
      }
      let res = await this.$api.wdzh_getData({
        page: this.currentPage,
        limit: this.pageSize,
        filter,
        op,
      });
      this.total = res.count;
      res.data = res.data.map((v) => {
        return {
          id: v.id,
          type: v.type,
          zhanghao: {
            nickname: v.nickname,
            avatar: v.avatar,
          },
          e_account_role: v.e_account_role,
          status: v.status,
          createtime: v.createtime,
          operat: v.operat,
        };
      });
      this.dataSource = res.data;
    },

    search() {
      this.currentPage = 1;
      this.dataSource = [];
      this.getData();
    },
    // 重置筛选条件
    reset() {
      for (let key in this.filter) {
        this.filter[key].value = "";
        this.getData();
      }
    },
    // 添加
    handleClickAdd() {
      this.dialogVisible = true;
    },
    // 删除 打开确认框
    handleClickDel() {
      if (this.selectedRows.length) {
        this.showConfirm = true;
      } else {
        this.$message("请先选择");
        // 提示请选择
      }
    },
    async confirmDelete() {
      await this.$api.wdzh_delete({
        id: this.selectedRows.map((v) => v.id),
      });
      this.showConfirm = false;
      // 重新计算页码
      //  删除以后 剩余数量
      let num = this.total - this.selectedRows.length;
      // 获得删除以后剩余数量 可以 分几页
      let page = Math.ceil(num / this.pageSize);
      // 如果 当前页 > page
      if (this.currentPage > page) {
        this.currentPage = page;
      }
      this.getData();
    },
    // 表格
    // 选中行改变时
    selectionChange(selection) {
      this.selectedRows = selection;
    },
    // 修改状态
    async changeSwitchValue(row) {
      await this.$api.wdzh_changeStatus({
        id: row.id,
        field: "status",
        value: row.status ? 0 : 1,
      });
      this.getData();
    },
    // 表格 点击授权
    async toAdd(row) {
      let res = await this.$api.wdzh_edit({
        id: row.id,
        type: row.type,
      });
      if (res.url) {
        window.open(res.url);
      }
    },
    // 获取粉丝列表
    getMyFans(row) {
      this.listTitle = "粉丝列表";
      this.response = {
        cursor: 0,
        has_more: true,
        list: [],
        total: 0,
      };
      let user = JSON.parse(JSON.stringify(row));
      user.listType = 1;
      this.selectedUser = user;
      this.getFansList();
    },
    async getFansList() {
      let res = await this.$api.wdzh_getMyFans({
        id: this.selectedUser.id,
        cursor: this.response.cursor,
      });

      if (res.data) {
        res.data.list = res.data.list.map((v) => {
          return {
            avatar: v.avatar,
            nickname: v.nickname,
            gender: v.gender == 0 ? "-" : v.gender == 1 ? "男" : "女",
            city: v.city,
          };
        });
        this.response = res.data;
        this.showList = true;
      } else {
        this.$message("授权已过期，请重新授权");
      }
    },
    // 粉丝列表 跳转到首页
    jumpIndex() {
      this.response.cursor = 0;
      if (this.selectedUser.listType == 1) {
        this.getFansList();
      } else {
        this.getFollowList();
      }
    },
    // 粉丝列表 下一页
    nextPage() {
      if (!this.response.has_more) {
        return;
      }
      if (this.selectedUser.listType == 1) {
        this.getFansList();
      } else {
        this.getFollowList();
      }
    },
    getMyAttention(row) {
      this.listTitle = "关注列表";
      this.response = {
        cursor: 0,
        has_more: true,
        list: [],
        total: 0,
      };
      let user = JSON.parse(JSON.stringify(row));
      user.listType = 2;
      this.selectedUser = user;
      this.getFollowList();
    },
    async getFollowList() {
      let res = await this.$api.wdzh_getMyFollow({
        id: this.selectedUser.id,
        cursor: this.response.cursor,
      });
      if (res.data) {
        res.data.list = res.data.list.map((v) => {
          return {
            avatar: v.avatar,
            nickname: v.nickname,
            gender: v.gender == 0 ? "-" : v.gender == 1 ? "男" : "女",
            city: v.city,
          };
        });
        this.response = res.data;
        this.showList = true;
      } else {
        this.$message("授权已过期，请重新授权");
      }
    },
    // 页码跳转
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getData();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    changeConditions(res) {
      this.filter[res.key].value = res.val;
    },
    // 授权弹窗
    async handleClickPlatform(btn) {
      this.dialogVisible = false;
      if (btn.value == "haokan") {
        this.showHaoKan = true;
      } else if (btn.value == "bilibili") {
        this.showBiliBili = true;
      } else {
        let res = await this.$api.wdzh_add({
          type: btn.value,
        });
        window.open(res.url);
      }
    },
    // 点击 好看信息填写 确认按钮
    async confirmHaoKan() {
      let reqBody = {};
      reqBody.type = "haokan";
      for (let key in this.haoKanForm) {
        reqBody[key] = this.haoKanForm[key].value;
        if (this.haoKanForm[key].value == "") {
          return this.$message(`请输入${this.haoKanForm[key].label}`);
        }
      }
      await this.$api.wdzh_add(reqBody);
      this.showHaoKan = false;
      this.getData();
    },
    async confirmBiliBili() {
      let reqBody = {};
      reqBody.type = "bilibili";
      for (let key in this.biliForm) {
        reqBody[key] = this.biliForm[key].value;
        if (this.biliForm[key].value == "") {
          return this.$message(`请输入${this.biliForm[key].label}`);
        }
      }
      await this.$api.wdzh_add(reqBody);
      this.showBiliBili = false;
      this.getData();
    },
    // 控制表格显示哪几列
    changeTableColumn(key) {
      this.tableColumn[key].show = !this.tableColumn[key].show;
    },
    // 点击刷新
    refresh() {
      this.currentPage = 1;
      this.dataSource = [];
      this.getData();
    },
  },
};
</script>

<style lang="less" scoped>
.wdzh {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 112px 0 0px 0;
  box-sizing: border-box;
}
.query {
  position: absolute;
  top: 52px;
  display: flex;
  align-items: center;
  width: 100%;
  height: 52px;
  padding: 0 20px;
  box-sizing: border-box;
  background-color: #fff;
  .button {
    width: 60px;
    height: 30px;
    border-radius: 3px;
    margin-left: 15px;
  }
}
.container {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 65px 0 80px 0;
  box-sizing: border-box;
  background-color: #fff;
  .action {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 65px;
    padding: 0 34px;
    box-sizing: border-box;
    .add-del {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
      /deep/ .button {
        width: 107px;
        height: 40px;
        border-radius: 3px;
        margin-right: 15px;
        font-size: 13px;
        font-weight: bold;
      }
    }
    .list-refresh {
      position: absolute;
      bottom: 12px;
      right: 45px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 60px;
      .icon {
        font-size: 17px;
        color: rgba(212, 212, 212);
        cursor: pointer;
      }
    }
  }
  .table {
    width: 100%;
    height: 100%;
    padding: 0 34px;
    box-sizing: border-box;
    /deep/ .header-row-class-name {
      height: 65px;
      th {
        background-color: #f0f4ff;
      }
      .cell {
        color: #333;
        text-align: center;
      }
    }
    /deep/ .row-class-name {
      height: 50px;
      .cell {
        display: flex;
        justify-content: center;
        text-align: center;
        .slot-row {
          display: flex;
          align-items: center;
          justify-content: center;
          .avatar {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            margin-right: 10px;
          }

          .icon-block {
            display: flex;
            align-items: center;
            height: 18px;
            padding: 0 8px;
            border-right: 2px solid #c7c7c7;
            .icon {
              color: #333;
              font-size: 20px !important;
            }
            .number {
              color: #333;
              font-size: 16px;
            }
          }
          :last-child {
            border-right: 0;
          }
        }
        .button {
          width: 60px;
          height: 24px;
        }
      }
    }
    /deep/ .el-table__body-wrapper {
      &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 10px;
      }
      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 5px;
        // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: rgb(230, 228, 228);
      }
      &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        background: #fff;
      }
    }
  }
}
.page {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 80px;
  /deep/ .active {
    background-color: #387cf7 !important;
  }
}

// 弹窗样式
.el-dialog__wrapper {
  /deep/ .el-dialog__header {
    padding: 0;
  }
  /deep/ .el-dialog__body {
    padding: 0;
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 60px;
      line-height: 60px;
      padding: 0 15px 0 30px;
      box-sizing: border-box;
      color: #000;
      font-size: 18px;
      font-weight: bold;
      border-bottom: 1px solid #e7e7e7;
      .icon-close {
        font-size: 20px;
        color: #d7d7d7;
        user-select: none;
        cursor: pointer;
      }
    }
    .footer {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px 0 20px 0;
    }
  }
  /deep/ .el-dialog__footer {
    padding: 0;
  }
}
.dialog-list {
  .body {
    height: 400px;
    overflow: auto;
  }
  .footer {
    .button {
      height: 30px;
      margin-left: 15px;
    }
  }
}
.dialog-haokan {
  .body {
    padding: 20px 60px;
    box-sizing: border-box;
    .desc {
      width: 100%;
      .desc-row {
        margin-bottom: 8px;
        line-height: 20px;
        font-size: 16px;
      }
      .a {
        margin-bottom: 8px;
        line-height: 20px;
        font-size: 16px;
        color: crimson;
        cursor: pointer;
      }
    }
    .form {
      width: 100%;
      /deep/ .myInput {
        margin: 15px;
        .input {
          width: 300px;
        }
        .label {
          width: 100px;
        }
      }
    }
  }
  .footer {
    .button {
      margin-left: 15px;
    }
  }
}
.dialog-shouquan {
  .body {
    padding: 20px 60px;
    box-sizing: border-box;
    .btn-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 100%;
      height: 184px;
      .btn-item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 154px;
        height: 38px;
        box-shadow: 0 0 5px 2px rgb(236, 235, 235) inset;
        border-radius: 5px;
        cursor: pointer;
        user-select: none;
        .btn {
          width: 148px;
          height: 32px;
          line-height: 32px;
          background-color: rgb(203, 220, 239);
          border-radius: 5px;
          text-align: center;
          color: #333;
        }
      }
    }
  }
}
</style>